// 导入React核心库和必要的钩子
import React, { useEffect, useState } from "react";
// 导入样式文件
import './3dman.css'
// 导入AI数字人组件
import AiHome from "../../components/Ai/Ai"
// 导入语音交互提示图
import img from "../../assets/image/speeching.gif"

const DigitalHuman = () => {
  // 状态管理 ==============================================
  // 控制权限请求对话框的显示/隐藏
  const [showPermissionDialog, setShowPermissionDialog] = useState(false);
  // 记录麦克风权限状态（null: 未决定，granted: 已授权，denied: 已拒绝）
  const [permissionStatus, setPermissionStatus] = useState(null);

  // 权限处理函数 ==========================================
  // 处理用户权限选择
  const handleRequestPermission = async (userChoice) => {
    setShowPermissionDialog(false); // 无论选择如何都关闭对话框

    if (userChoice === "allow") {
      try {
        // 请求麦克风权限
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
        setPermissionStatus("granted");
        console.log("麦克风访问已授权");
        // 此处可以开始处理音频流（后续可添加音频处理逻辑）
      } catch (error) {
        setPermissionStatus("denied");
        console.error("麦克风访问被拒绝:", error);
      }
    } else {
      setPermissionStatus("denied");
    }
  };

  // 页面结构 ==============================================
  return (
    <div className="Box">
      {/* 顶部留空区域（可能用于后续扩展） */}
      <div className="top"></div>
      {/* 主要内容容器 - 使用flex布局实现左右分栏 */}
      <div className="middle-container">
        {/* 左侧数字人展示区域 */}
        <div className="character-area">
          <AiHome /> {/* 3D数字人组件 */}
        </div>

        {/* 右侧视频演示区域 */}
        <div className="video-area">
          {/* 视频边框容器（用于实现装饰性边框效果） */}
          <div className="video-border">
            {/* 视频包装器（控制视频尺寸和溢出处理） */}
            <div className="video-wrapper">
              <video
                controls    // 显示原生视频控件
                autoPlay    // 自动播放
                loop        // 循环播放
                muted       // 静音播放（避免自动播放限制）
                playsInline // 防止iOS全屏播放
                className="digital-human-video"
              >
                <source
                  src="/videos/rBsCHGRjMUmAdnB7BuCLPLZ-E4U081.mp4" // 视频文件路径
                  type="video/mp4"
                />
              </video>
            </div>
          </div>
        </div>
      </div>

      {/* 权限请求对话框 */}
      {showPermissionDialog && (
        <div className="permission-dialog-overlay">
          <div className="permission-dialog">
            <h3>麦克风访问请求</h3>
            <p>我们需要访问您的麦克风来提供语音交互功能</p>
            <div className="dialog-buttons">
              <button
                className="allow-btn"
                onClick={() => handleRequestPermission("allow")}
              >
                允许
              </button>
              <button
                className="deny-btn"
                onClick={() => handleRequestPermission("deny")}
              >
                拒绝
              </button>
            </div>
          </div>
        </div>
      )}

      {/* 底部控制栏 */}
      <div className="bottom">
        {/* 语音交互触发按钮 */}
        <img
          className="img"
          src={img}
          alt="语音交互"
          onClick={() => setShowPermissionDialog(true)} // 点击打开权限请求对话框
          style={{
            cursor: "pointer",
            // 根据权限状态改变样式：
            filter: permissionStatus === "granted" ? "none" : "grayscale(100%)", // 未授权时灰度显示
            opacity: permissionStatus === "denied" ? 0.5 : 1 // 被拒绝时降低透明度
          }}
        />
        {/* 权限被拒时的提示信息 */}
        {permissionStatus === "denied" && (
          <div className="permission-warning">
            麦克风访问被拒绝，如需启用请刷新页面后重试
          </div>
        )}
      </div>
    </div>
  );
};

export default DigitalHuman;